import React, { Component } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import { Tabs, WhiteSpace, Badge,TextareaItem ,List,Button,SegmentedControl } from 'antd-mobile';
import "./index.scss"
import ContactusImg from '../../assets/img/contactus-img.png'
import Axios from 'axios';
import moment from 'moment'
import requestAxios from '../../utils/myaxios'
import ScrollArea from 'react-scrollbar';
import { BASE_URL } from '../../utils/requestPath';
import OnlineService from '../onlineService/onlineService'
const tabs = [
    { title: <div 
        style={{backgroundColor:"orange",paddingLeft:20,width:"100%",textAlign:"center",borderTopLeftRadius:15,borderBottomLeftRadius:15}}
        >人工服务</div> },
    { title: <div 
        style={{backgroundColor:"orange",width:"100%",textAlign:"center",borderTopRightRadius:15,borderBottomRightRadius:15}}
        >留言回复</div> },
  ];
class Index extends Component {

    state = {
        reSet:"<",
        commentList:[],
        inputText:"",
        segmentedcontrolStart:false
    }
    
    handleClick = (params) => {
        this.props.history.push("/searchCenter");
    }
    
    escOnClick=()=>{
        this.props.history.goBack()
    }

    componentDidMount(){
        document.title="联系客服"
        this.requestComment()

    }

    requestComment=()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {}
        const zgUserId = 1
        const zgSendUserId = parseInt(userInfoIns.id)
        const comentDto = {zgSendUserId,zgUserId}; 
        console.log(userInfoIns)
        console.log("客服系统.................")
        requestAxios.post(BASE_URL+"/zg/comment/messgae/find/all/0/0",comentDto).then(res=>{
            console.log(res.data)
            this.setState({
                commentList:res.data
            })
        })
    }

    textInputChange=(e)=>{
        console.log(e)
        this.setState({
            inputText:e
        })
    }

    requestInputCommentClick=async()=>{
        const userInfos = localStorage.getItem("userInfoIns");
        const userInfoIns = JSON.parse(userInfos) || {}

        const zgUserId = 1;
        const commentText = this.state.inputText;
        
        const zgSendUserId = userInfoIns.id;
        const comentDto = {zgUserId,commentText,zgSendUserId}; 
        await requestAxios.post(BASE_URL+"/zg/comment/messgae/add",comentDto).then(res=>{
            
            if(res.data === 1){
                console.log("留言成功.....")
                this.setState({
                    inputText:""
                })
            }
            
        })

        await this.requestComment()

    }

    onChange = (e) => {
        console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
      }
    onValueChange = (value) => {
      console.log(value);
    }

    segmentedControl=(e)=>{
        console.log(e.nativeEvent.selectedSegmentIndex)
        if(e.nativeEvent.selectedSegmentIndex === 0){
            this.setState({
                segmentedcontrolStart:true
            })
        }else{
            this.setState({
                segmentedcontrolStart:false
            })
        }
    }

    render() {
        const {reSet,commentList} = this.state;
        return (
            <div className="main-contactus">
                
                <header className="main-contactus-header">
                    <div className="main-contactus-header-con" onClick={this.escOnClick}>
                        <span className="main-contactus-header-con-span-one">{reSet}</span>
                        <span  className="main-contactus-header-con-span-two">返回</span>
                    </div>
                    <h4>
                        联系客服
                    </h4>
                    <img src={ContactusImg}></img>
                </header>


               <div className="main-contactus-con">
                 <div className="main-contactus-con-content">
                    <div className="main-contactus-con-content-phone">
                    <SegmentedControl
                    onChange={this.segmentedControl}
                    selectedIndex={1}
                    values={['人工服务', '留言回复']} />
                        {/* <h4 className="main-h4">人工服务</h4>
                        <h4 className="main-h5">留言回复</h4> */}
                    </div>
                
                 </div>
               </div>
               
               {this.state.segmentedcontrolStart?
               <OnlineService></OnlineService>
               :
                 <div>
                 <div className="main-contactus-con-comment" >
                     {commentList.map((value,index)=>{
                         return (
                             <div key={index}>
                                 {value.zgSendUserId !== 1?

                                     <div className="main-contactus-con-list">
                                     <section className="main-contactus-con-top">
                                         <h4>客户:</h4> <h5>{moment(new Date(parseInt(value.createTime))).format("MM-DD hh:mm")}</h5>
                                     </section>
                                     <h4 className="main-kh-h4">{value.commentText}</h4>
                                     <h5>关联产品:</h5>
                                     </div>                         
                                 :
                                     <div className="main-contactus-con-reply">
                                     <h4>回复:</h4>
                                     <h5>{value.commentText}</h5>
                             </div>

                             }
                             </div>     
                         )
                     })}
                 
                 </div>
                 <TextareaItem
                 initialValue="......."
                 rows={5}
                 count={100}
                 onChange={this.textInputChange}
                 value={this.state.inputText}
             />
         <div className="am-button-contactus">
             <Button 
                 onClick={this.requestInputCommentClick}
                 className="main-contactus-button"
                 type="primary">发送留言</Button>
         </div>
          </div>
               }
                
            </div>
        )
    }
}
export default withRouter(Index)
